import React, { useState } from 'react'
import Header from '../../components/Header/Header'
import { Button, Form, Input, Toast } from 'antd-mobile'
import './Login.less'
import Logo from '../../assets/img/logo.png'
import { reqlogin } from '../../request/api'

function Login(props) {
  const [user, setUser] = useState({
    phone: '',
    password: ''
  })
  // 登录
  const doLogin=()=>{
    reqlogin(user).then(res=>{
      if(res.data.code==200){
        Toast.show({
          content:res.data.msg
        })
        // 存储用户登录信息在本地
        localStorage.setItem('isLogin',JSON.stringify(res.data.list))
        // 跳转到首页
        props.history.push('/index/home')
      }
    })
  }
  return (
    <div className='login'>
      <Header title={'手机登录'} register></Header>
      <div className='form'>
        <img src={Logo} alt="" />
        <Form layout='horizontal'>
          <div>{JSON.stringify(user)}</div>
          <Form.Item label='用户名' name='username'>
            <Input placeholder='请输入用户名' clearable onChange={(e)=>setUser({...user,phone:e})}/>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password' onChange={(e)=>setUser({...user,password:e})}/>
          </Form.Item>
        </Form>
        <div>
          <Button block color='success' size='middle' onClick={()=>doLogin()} >
            登录
          </Button>
        </div>
      </div>
    </div>
  )
}


export default Login